<template>
  <div id="app">
  	<router-view></router-view>

    <div class="tabbar flex-cnt-start" v-bind:class="swipeClass.tabbar" v-if="showTabbar" v-touchmove.prevent>
      <a class="iconfont icon-list" v-bind:class="currentModel === 'home' ? 'selected' : ''" v-on:click="gotoPage('home')"></a>
      <a class="iconfont icon-zhinanzhen" v-bind:class="currentModel === 'find' ? 'selected' : ''" v-on:click="gotoPage('find')"></a>
      <a class="iconfont icon-108" style="margin-top: -3px;" v-bind:class="currentModel === 'bell' ? 'selected' : ''" v-on:click="gotoPage('bell')"></a>
      <a class="iconfont icon-lingdang" v-bind:class="currentModel === 'comment' ? 'selected' : ''" v-on:click="gotoPage('comment')"></a>
      <a class="iconfont icon-gengduo1" v-bind:class="currentModel === 'navicon' ? 'selected' : ''" v-on:click="gotoPage('navicon')"></a>
    </div>
  </div>
</template>

<script>
  import { mapState, mapActions } from 'vuex'

  export default {
    name: 'app',
    computed: mapState({
      swipeClass: state => state.swipeClass,
      currentModel: state => state.currentModel,
      showTabbar: state => state.showTabbar
    }),
    methods: {
      ...mapActions(['updateCurrentModel']),
      gotoPage (model) {
        if (model === 'home' || model === 'find') {
          this.$router.replace({name: model})
        }
        this.updateCurrentModel(model);
      }
    }
  }
</script>

<style lang="less">
  @import "./assets/less/main.less";

  .tabbar {
    background-color: #fff;
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 50px;
    box-shadow: -1px 0 1px #999;
    z-index: 999;
    &:before {
      border-top: 1px solid #F5F5F5;
      width: 200%;
      transform-origin: 0 0;
      transform: scale(.5, .5);
      box-sizing: border-box;
    }
    a {
      font-size: 24px;
      line-height: 50px;
      text-align: center;
      color: #D4D4D4;
      flex: 1;

      &.selected {
        color: #1E8AE8;
      }
    }
  }

  .header-up {
    animation: header-up .5s 1 forwards;
  }

  @keyframes header-up {
    0% { top: 0 }
    100% { top: -50px }
  }

  .header-down {
    animation: header-down .5s 1 forwards;
  }

  @keyframes header-down {
    0% { top: -50px }
    100% { top: 0 }
  }

  .navigator-down {
    animation: navigator-down .5s 1 forwards;
  }

  @keyframes navigator-down {
    0% { bottom: 0 }
    100% { bottom: -50px }
  }

  .navigator-up {
    animation: navigator-up .5s 1 forwards;
  }

  @keyframes navigator-up {
    0% { bottom: -50px }
    100% { bottom: 0 }
  }

  .btn-circle-down {
    animation: btn-circle-down .5s 1 forwards;
  }

  @keyframes btn-circle-down {
    0% { bottom: 70px }
    100% { bottom: -60px }
  }

  .btn-circle-up {
    animation: btn-circle-up .5s 1 forwards;
  }

  @keyframes btn-circle-up {
    0% { bottom: -60px }
    100% { bottom: 70px }
  }
</style>
